<script setup>
import { ref, reactive, computed } from "vue";
import useTaskStore from "@/pinia/modules/taskStore";

const taskStore = useTaskStore();

const props = defineProps({
  /*运输任务ID*/
  transportTaskId: {
    type: String,
    required: true,
  },
});

/* 定义 popup 组件展示的数据*/
const exceptionTypes = ["发动机启动困难", "不着车，漏油", "照明失灵", "排烟异常、温度异常", "其他问题"];

/*popup组件的ref实例*/
const popup = ref(null);

/*异常时间提示*/
const exceptionTime = computed(() => {
  return timePicker.value || "请选择";
});

/*异常日期*/
const timePicker = ref("");
/*上报异常位置*/
const exceptionPlace = ref("");
/*异常类型*/
const exceptionType = ref([]);
/*异常描述*/
const exceptionDescribe = ref("");
/*异常图片*/
const exceptionImagesList = ref([]);

const changeExceptionType = ({ detail }) => {
  exceptionType.value.push(detail.value[0]);
};

/*打开地图的回调函数*/
const onLocationChoose = async () => {
  const { address } = await uni.chooseLocation({});
  console.log(address);
};

/*点击类型弹层确认按钮的回调函数*/
const onPopupConfirm = () => {
  popup.value.close();
};

/*打开弹层的回调函数*/
const onPopupOpen = () => {
  popup.value.open();
};

/*提交按钮的回调函数*/
const submit = async () => {
  try {
    const params = {
      transportTaskId: props.transportTaskId,
      exceptionTime: timePicker.value,
      exceptionPlace: exceptionPlace.value,
      exceptionType: exceptionType.value.join("|"),
      exceptionDescribe: exceptionDescribe.value,
      exceptionImagesList: exceptionImagesList.value.map(item => ({ url: item.url })),
    };
    await taskStore.reportException(params);
    uni.showToast({ title: "异常上报成功", duration: 2000, icon: "success" });
  } catch (error) {
    uni.showToast({ title: "异常上报失败", duration: 2000, icon: "error" });
  }
};
</script>

<template>
  <view class="page-container">
    <scroll-view class="scroll-view" scroll-y>
      <view style="margin: 30rpx" class="scroll-view-wrapper">
        <uni-list :border="false">
          <uni-list-item show-arrow title="异常时间">
            <template v-slot:footer>
              <uni-datetime-picker v-model="timePicker">
                <view class="picker-value">{{ exceptionTime }}</view>
              </uni-datetime-picker>
            </template>
          </uni-list-item>
          <uni-list-item show-arrow clickable ellipsis="1" @click="onLocationChoose" title="上报位置"
                         :rightText="exceptionPlace||'请选择'" />
          <uni-list-item show-arrow clickable @click="onPopupOpen" title="异常类型"
                         :rightText="exceptionType.join('|')||'请选择'" />
          <uni-list-item direction="column" title="异常描述">
            <template v-slot:footer>
              <view class="textarea-wrapper">
                <textarea class="textarea" placeholder="请输入异常描述" v-model="exceptionDescribe"></textarea>
                <view class="words-count">{{ exceptionDescribe.length }}/50</view>
              </view>
            </template>
          </uni-list-item>
          <uni-list-item :border="false" style="margin-top: -30rpx" direction="column" title="上传图片（最多6张）">
            <template v-slot:footer>
              <uni-file-picker limit="6" v-model="exceptionImagesList"></uni-file-picker>
            </template>
          </uni-list-item>
        </uni-list>
      </view>
    </scroll-view>
    <view class="fixbar">
      <button class="button disable" @click="submit">提交</button>
    </view>
    <!-- 异常类型弹层 -->
    <uni-popup ref="popup" type="bottom">
      <uni-list class="popup-action-sheet">
        <uni-list-item>
          <template v-slot:header>
            <view class="header">选择类型</view>
          </template>
        </uni-list-item>

        <uni-list-item v-for="(item) in exceptionTypes" :title="item">
          <template v-slot:footer>
            <checkbox-group class="checkbox" @change="changeExceptionType">
              <checkbox color="#EF4F3F" :value="item" />
            </checkbox-group>
          </template>
        </uni-list-item>


        <uni-list-item>
          <template v-slot:body>
            <button @click="onPopupConfirm" class="button">确定</button>
          </template>
        </uni-list-item>
      </uni-list>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>
